<template>
  <div id="category">
    <el-button type="danger" @click="addFirst({ type: 'category_first_add' })"
      >添加一级分类</el-button
    >
    <hr class="page-line" />
    <el-row :gutter="30">
      <el-col :span="8">
        <div class="category">
          <div v-for="(firstItem, index) in categoryData.item" :key="index">
            <h4>
              <svg-icon iconName="minus" />
              {{ firstItem.category_name }}
              <div class="button-group">
                <el-button
                  size="mini"
                  type="danger"
                  round
                  @click="
                    updateCategoryItem({
                      data: firstItem,
                      type: 'category_first_edit'
                    })
                  "
                  >编辑</el-button
                >
                <el-button size="mini" round type="success">添加子集</el-button>
                <el-button
                  size="mini"
                  round
                  @click="deleteCategoryItem(firstItem.id)"
                  >删除</el-button
                >
              </div>
            </h4>
            <ul v-if="firstItem.children">
              <li v-for="(item, index) in firstItem.children" :key="index">
                {{ item.category_name }}
                <div class="button-group">
                  <el-button size="mini" type="danger" round>编辑</el-button>
                  <el-button
                    size="mini"
                    round
                    @click="deleteCategoryItem(item.id)"
                    >删除</el-button
                  >
                </div>
              </li>
            </ul>
          </div>
        </div>
      </el-col>
      <el-col :span="16" v-if="add.categorySce || add.categoryFirst">
        <h3>一级分类编辑</h3>
        <el-form label-width="142px" :model="form">
          <el-form-item label="一级分类名称" v-if="add.categoryFirst">
            <el-input
              v-model="form.category"
              class="width400"
              :disabled="setDisable.firstCategory"
            ></el-input>
          </el-form-item>
          <el-form-item label="二级分类名称" v-if="add.categorySce">
            <el-input
              v-model="form.secCategory"
              class="width400"
              :disabled="setDisable.secCategory"
            ></el-input>
          </el-form-item>
          <el-button
            class="el-button-que"
            type="danger"
            :loading="submitStart"
            @click="submit"
            :disabled="setDisable.submitButton"
            >确认</el-button
          >
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  addFirstCategory,
  deleteCategory,
  editCategory
} from "@/network/api/news.js";
import { onMounted, reactive, ref, watch } from "@vue/composition-api";
import { common } from "../../utils/common";
export default {
  name: "infoCategory",
  setup(props, { root }) {
    const { getInfoCategory, categoryItem } = common();
    const submitStart = ref(false);

    const submitType = ref("");

    const form = reactive({
      category: "",
      secCategory: ""
    });

    const add = reactive({
      categoryFirst: true,
      categorySce: true
    });

    const setDisable = reactive({
      firstCategory: true,
      secCategory: true,
      submitBtton: true
    });

    //3.0中reactive设置的一定是obj对象  不是array
    const categoryData = reactive({
      item: [],
      current: {}
    });

    //生命周期 页面挂在完成之后
    onMounted(() => {
      getInfoCategory();
    });

    //watch

    watch(
      () => categoryItem.item,
      value => {
        categoryData.item = value;
      }
    );

    //methods
    const submit = () => {
      if (!form.category) {
        return root.$message({
          type: "error",
          message: "分类名称不能为空！"
        });
      }
      submitStart.value = true;

      if (submitType.value == "category_first_add") {
        addFirstCategoryItem();
      }

      if (submitType.value == "category_first_edit") {
        editCategoryItem();
      }
    };

    //添加一级分类
    const addFirst = proms => {
      submitType.value = proms.type;
      updateState();
    };

    const addFirstCategoryItem = () => {
      addFirstCategory({ categoryName: form.category })
        .then(result => {
          let res = result.data;
          if (res.resCode == 0) {
            root.$message({
              type: "success",
              message: res.message
            });
            categoryData.item.push(res.data);
            submitStart.value = false;
            form.category = "";
          }
        })
        .catch(() => {
          submitStart.value = false;
        });
    };

    //编辑一级分类
    const updateCategoryItem = proms => {
      submitType.value = proms.type;
      categoryData.current = proms.data;
      form.category = proms.data.category_name;
      updateState();
    };

    const editCategoryItem = () => {
      let resData = {
        id: categoryData.current.id,
        categoryName: form.category
      };
      editCategory(resData)
        .then(result => {
          submitStart.value = false;
          root.$message({
            message: result.data.message,
            type: "success"
          });

          categoryData.item.forEach(res => {
            if (res.id == resData.id) {
              res.category_name = resData.categoryName;
            }
          });
          // 清空输入框
          form.category = "";
          categoryData.current = [];
          submitType.value = "category_first_add";
        })

        .catch(() => {
          submitStart.value = false;
        });
    };

    const updateState = () => {
      add.categoryFirst = true;
      add.categorySce = false;
      setDisable.firstCategory = false;
      setDisable.submitBtton = false;
    };

    // 点击删除分类按钮
    const deleteCategoryItem = categoryId => {
      root.confirm({
        title: "确定删除所选数据吗？删除后将不能恢复！",
        fn: deleteFunction,
        id: categoryId,
        catch: () => {}
      });
    };

    //删除一级分类
    const deleteFunction = categoryId => {
      deleteCategory({ categoryId })
        .then(result => {
          if (result.data.resCode == 0) {
            // 过滤数据  方式1
            // categoryData.item.forEach((res, index) => {
            //   if (res.id == categoryId) {
            //     categoryData.item.splice(index, 1);
            //   }
            // });

            //方式2
            categoryData.item = categoryData.item.filter(
              res => res.id != categoryId
            );
          }
        })
        .catch(() => {});
    };

    return {
      submitType,
      submitStart,
      //reactive
      form,
      add,
      categoryData,
      setDisable,

      //methods
      submit,
      addFirst,
      deleteCategoryItem,
      updateCategoryItem
    };
  }
};
</script>

<style lang="scss" scoped>
.page-line {
  width: calc(100%);
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: rgb(238, 236, 236);
  border: 0;
  height: 1px;
}
.category {
  line-height: 44px;
  position: relative;
  &:before {
    content: "";
    position: absolute;
    border-left: 1px dotted #000;
    left: 20px;
    top: 22px;
    bottom: 22px;
  }
  h4 {
    padding-left: 40px;
    position: relative;
  }
  svg {
    position: absolute;
    top: 13px;
    left: 11px;
    background-color: #fff;
  }

  li {
    padding-left: 38px;
    margin-left: 22px;
    position: relative;
    &:before {
      content: "";
      position: absolute;
      width: 32px;
      border-bottom: 1px dotted #000;
      left: 0;
      top: 22px;
    }
  }

  li,
  h4 {
    cursor: pointer;
    &:hover {
      background-color: rgba(240, 240, 240, 0.66);
      @include webkit(transition, all 0.3s ease 0s);

      .button-group {
        display: inline-block;
      }
    }
  }
}
.button-group {
  position: absolute;
  right: 0;
  z-index: 2;
  display: none;
  button {
    font-size: 12px;
  }
}

h3 {
  background-color: rgba(240, 240, 240, 0.66);
  line-height: 44px;
  padding-left: 10px;
  margin-bottom: 22px;
}
.width400 {
  width: 420px;
  margin-bottom: 22px;
}
.el-button-que {
  margin-left: 145px;
}
</style>
